<template>
  <div class="signIn" :class="themeClass">
    <v-loading v-if="loading" />
    <div class="signIn_top">
      <div class="signIn_top_line select" @click="jumpRouter('/line')">
        <img src="@/assets/img/RssSimple@2x.png" alt="" />
        <span :class="bgColor">{{ $t('SignIn.Switching Lines') }}</span>
      </div>
      |
      <div class="signIn_top_lang select" @click="jumpRouter('/lang')">
        <img src="@/assets/img/translate@2x(1).png" alt="" />
        <span :class="bgColor">{{ $t('SignIn.switch language') }}</span>
      </div>
    </div>
    <div class="signIn_box">
      <div class="signIn_box_desc">
        <h2 :class="bgColor">{{ $t('SignIn.log on') }}</h2>
        <span :class="bgColor">{{ $t('SignIn.Open transactions anytime, anywhere') }}</span>
      </div>
      <div class="signIn_box_form">
        <van-form>
          <div class="email">
            <van-field v-model="form.email" :placeholder="$t('SignIn.Please enter your email address')" />
            <van-icon @click="form.email = ''" v-if="form.email !== ''" name="clear" />
          </div>
          <div class="password">
            <van-field v-model="form.password" :type="view_pwd ? '' : 'password'" :placeholder="$t('SignIn.Please enter password')" />
            <van-icon :name="view_pwd ? 'eye-o' : 'closed-eye'" @click="viewPwd('view_pwd')" />
          </div>

          <div class="submit_btn">
            <van-button block type="default" native-type="submit" @click="onSubmit">{{ $t('SignIn.log on') }}</van-button>
          </div>
        </van-form>
      </div>
      <div class="signIn_box_user">
        <b @click="jumpRouter('/message')" :class="bgColor">{{ $t('SignIn.Register Now') }}</b>
        <!-- <b @click="jumpRouter('/register')" :class="bgColor">{{ $t('SignIn.Register Now') }}</b> -->
        <span>|</span>
        <b @click="jumpRouter('/update')" :class="bgColor">{{ $t('SignIn.forgot password') }}</b>
      </div>
    </div>
    <v-custom-service />
  </div>
</template>
<script>
export default {
  name: 'SignIn',
  data() {
    return {
      form: {
        email: '',
        password: ''
      },
      isDayTime: false,
      view_pwd: false,
      loading: false
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  methods: {
    viewPwd(type) {
      this[type] = !this[type]
    },
    async onSubmit() {
      if (this.form.email.trim() === '') {
        this.$toast(this.$t('SignIn.Please enter your email address'))
        return
      }
      if (this.form.password.trim() === '') {
        this.$toast(this.$t('SignIn.Please enter password'))
        return
      }
      this.loading = true
      const params = {
        email: this.form.email,
        password: this.form.password,
        keep: true,
        tab: 'login'
      }
      await this.$https.post('/user/checkIn', params).then(res => {
        if (res != undefined && res.code == 1) {
          localStorage.setItem('userInfo', JSON.stringify(res.data))
          this.$router.push('/mine')
        }
      })
      this.loading = false
    },
    jumpRouter(router) {
      this.$router.push(router)
    }
  }
}
</script>
<style lang="less">
@import './index.less';
</style>
